import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  View,
  Text,
  Modal,
  Animated,
  Dimensions,
  StyleSheet,
  Easing,
  StatusBar,
} from 'react-native';
import TimerEnhance from 'react-native-smart-timer-enhance';

const SCREEN_SIZE = Dimensions.get('window');
const MENU_WIDTH = SCREEN_SIZE.width - 10;// menu width

@TimerEnhance
export default class PopMenu extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,

      menuScale: new Animated.Value(0.5), // menu scale
      menuOpacity: new Animated.Value(0), // menu opacity
    };
  }

  // 关闭modal
  // next在关闭之后调用
  close = (next) => {
    Animated.parallel([
      Animated.timing(this.state.menuScale, {
        toValue: 0.5,
        duration: 400,
        easing: Easing.elastic(1),
      }),
      Animated.timing(this.state.menuOpacity, {
        toValue: 0,
        duration: 400,
        easing: Easing.elastic(1),
      }),
    ]).start(() => this.setState({ visible: false }, () => {
      typeof next === 'function' && next();
    }));
  };

  // 打开modal
  // 演示功能的场景
  open = (next, delay, before) => {
    if (delay) {
      this.setState({ visible: true }, () => {
        typeof before === 'function' && before();
        this.setTimeout(() => {
          Animated.parallel([
            Animated.timing(this.state.menuScale, {
              toValue: 1,
              duration: 300,
              easing: Easing.elastic(1),
            }),
            Animated.timing(this.state.menuOpacity, {
              toValue: 1,
              duration: 300,
              easing: Easing.elastic(1),
            }),
          ]).start(() => {
            typeof next === 'function' && next();
          });
        }, delay);
      });
    } else {
      this.setState({ visible: true }, () => {
        Animated.parallel([
          Animated.timing(this.state.menuScale, {
            toValue: 1,
            duration: 300,
            easing: Easing.elastic(1),
          }),
          Animated.timing(this.state.menuOpacity, {
            toValue: 1,
            duration: 300,
            easing: Easing.elastic(1),
          }),
        ]).start(() => {
          typeof next === 'function' && next();
        });
      });
    }
  };

  render() {
    const {
      visible,
      menuScale,
      menuOpacity,
    } = this.state;
    const {
      top,  // 定位用的
      left, // 定位用
      style,
      wrapperStyle,
      children,
      wrapperWidth,
      height,
    } = this.props;

    //---------------------------------------------------------------------------------------------------------
    // 有wrapperWidth就会对menu进行left和top定位
    // 没有则只进行top定位，左右margin 10
    // 对popmenu进行定位
    // 点击的点是在屏幕的上部分还是在屏幕的下部分
    // true: 在上边，false:在下边
    const posTop = (top - StatusBar.currentHeight) - (SCREEN_SIZE.height - StatusBar.currentHeight) / 2 < 0; // popover是在屏幕的上边还是在屏幕的下边
    // 菜单的高度
    const menuHeight = height ? height : React.Children.count(children) * 50;
    // 最终menu的top
    const finalTop = (posTop ? top : (top - menuHeight)) - StatusBar.currentHeight;

    // 点击的点是在屏幕的左部分还是在屏幕的右部分
    // true:在左边，false: 在右边
    const posLeft = left - SCREEN_SIZE.width / 2 <= 0; // popover是在屏幕的左边还是在屏幕的右边

    // 菜单的宽度
    const menuWidth = wrapperWidth;

    const finalLeft = posLeft ? left : left - menuWidth;
    //---------------------------------------------------------------------------------------------------------

    return (
      <Modal
        animationType="none" // 动画搭配fade可以由比较好的过渡效果
        transparent
        visible={visible}
        onRequestClose={() => this.close()}>
        {/* 大浮层 */}
        <View style={[{ flex: 1, backgroundColor: 'rgba(0,0,0,.1)' }, style]}>
          <Text onPress={() => this.close()} style={styles.overlay} />
          {/* menu wrapper */}
          <Animated.View
            style={[{
              top: finalTop,
              left: wrapperWidth ? ((finalLeft <= 0) ? 0 : (finalLeft + menuWidth >= SCREEN_SIZE.width) ? SCREEN_SIZE.width - menuWidth : finalLeft) : 'auto',
              alignSelf: wrapperWidth ? 'flex-start' : 'center',
              width: wrapperWidth ? wrapperWidth : MENU_WIDTH,
              backgroundColor: '#fff',
              borderRadius: 5,
              opacity: menuOpacity,
              transform: [{ scale: menuScale }],
              height: menuHeight,
              overflow: 'visible',
            },
              wrapperStyle,
            ]}>
            {/* 三角形 */}
            {children}
          </Animated.View>
        </View>
      </Modal>
    );
  }
}

const styles = StyleSheet.create({
  overlay: {
    position: 'absolute',
    top: 0,
    right: 0,
    bottom: 0,
    left: 0,
  },
});

PopMenu.propTypes = {
  top: PropTypes.number,
  wrapperWidth: PropTypes.number,
  height: PropTypes.number,
};
PopMenu.defaultProps = {
  top: 56,
  wrapperWidth: null, // 自己定制整个wrapper的宽度
  height: 0,
};
